<template>
  <div class="app-container">
    <div class="app-container-inner">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="address" class="image" />
        <div style="padding: 14px">
          <span>党费缴纳二维码</span>
          <span style="margin-left: 70%">按时缴纳党费是每一位党员应尽的义务</span>
          <div class="bottom">
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import { Cloud } from 'laf-client-sdk'
  import watermark from '@/utils/watermark.js'
  import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()
  const currentDate = ref(new Date())
  const address = ref('')
  const cloud = new Cloud({
    baseUrl: 'https://su75ks.laf.run', // <APP_ID> 在首页应用列表获取
    getAccessToken: () => userStore.token, // 这里不需要授权，先填空
  })
  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
  onMounted(async () => {
    await getQRCode()
    await setWaterMark()
  })
  const getQRCode = async () => {
    const fileUrl = await cloud.invoke('getQRCode')
    address.value = fileUrl
  }
</script>
<style scoped lang="scss">
  .time {
    font-size: 12px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .button {
    padding: 0;
    min-height: auto;
  }

  .image {
    width: 100%;
    display: block;
  }
</style>
